<!DOCTYPE html>  
<html lang="zh">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>工业数据采集系统</title>  
    <style>  
        body {  
            font-family: Arial, sans-serif;  
            margin: 20px;  
        }  
        .control-panel {  
            display: flex;  
            justify-content: space-between;  
            margin-bottom: 20px;  
        }  
        .toggle-button3{  
            padding: 10px 15px;  
            cursor: pointer;  
            background-color: #f0f0f0;  
            border: 1px solid #ccc;  
            margin: 5px;  
            border-radius: 5px;  
            text-align: center;  
            width: 100px;  
        }  
        .status3 {  
            font-size: 16px;  
            margin-left: 10px;  
        }  
        .data-display {  
            margin-bottom: 20px;  
        }  
    </style>  
</head>  
<body>  

<h1>工业数据采集系统</h1>  

<div class="control-panel">  
    <div>  
        <span class="toggle-button3" onclick="toggle('airConditioner')">空调: <span id="airConditioner" class="status3">OFF</span></span>  
    </div>  
    <div>  
        <span class="toggle-button3" onclick="toggle('cooling')">制冷: <span id="cooling" class="status3">OFF</span></span>  
    </div>  
    <div>  
        <span class="toggle-button3" onclick="toggle('heating')">制热: <span id="heating" class="status3">OFF</span></span>  
    </div>  
    <div>  
        <span class="toggle-button3" onclick="toggle('curtains')">窗帘: <span id="curtains" class="status3">OFF</span></span>  
    </div>  
    <div>  
        <span class="toggle-button3" onclick="toggle('projector')">投影屏: <span id="projector" class="status3">OFF</span></span>  
    </div>  
</div>  

<div class="data-display">  
    <p>温度: <span id="temperature">--</span> °C</p>  
    <p>湿度: <span id="humidity">--</span> %</p>  
    <p>光照: <span id="light">--</span> lx</p>  
    <button onclick="refreshData()">刷新数据</button>  
    <button onclick="reportData()">上报数据</button>  
</div>  

<script>  
    // 控制开关状态  
    function toggle(elementId) {  
        const element = document.getElementById(elementId);  
        if (element.innerText === "OFF") {  
            element.innerText = "ON";  
            alert(`${elementId} 已开启`);  
        } else {  
            element.innerText = "OFF";  
            alert(`${elementId} 已关闭`);  
        }  
    }  

    // 刷新数据显示  
    function refreshData() {  
        const temperature = (Math.random() * 30 + 10).toFixed(1); // 生成例如 10-40 的随机温度  
        const humidity = (Math.random() * 100).toFixed(1); // 生成例如 0-100 的随机湿度  
        const light = (Math.random() * 1000).toFixed(1); // 生成例如 0-1000 的随机光照强度  

        document.getElementById("temperature").innerText = temperature;  
        document.getElementById("humidity").innerText = humidity;  
        document.getElementById("light").innerText = light;  

        alert("数据已刷新！");  
    }  

    // 上报数据显示  
    function reportData() {  
        const temperature = document.getElementById("temperature").innerText;  
        const humidity = document.getElementById("humidity").innerText;  
        const light = document.getElementById("light").innerText;  

        // 模拟上报数据  
        console.log("上报数据：");  
        console.log("温度:", temperature);  
        console.log("湿度:", humidity);  
        console.log("光照:", light);  
        alert("数据已经上报！");  
    }  
</script>  

</body>  
</html>